<template>
  <header class="app-header">
    <div class="header-left">
      <h1 hidden>计划投注</h1>
      <div class="logo">
        碎银系统
<!--        <span class="margin-r10 font-s12">当前门店: </span>-->
<!--        <el-popover-->
<!--          placement="bottom"-->
<!--          width="200"-->
<!--          trigger="click">-->
<!--          <span slot="reference" class="cursor-pointer">钱铺分店 <i class="el-icon-arrow-down"></i></span>-->
<!--          <div>-->
<!--            <el-input-->
<!--              size="small"-->
<!--              placeholder="请填写门店名称"-->
<!--              suffix-icon="el-icon-search"-->
<!--              v-model="input3">-->
<!--            </el-input>-->
<!--            <div class="margin-t6">-->
<!--              <ul>-->
<!--                <li>成都门店</li>-->
<!--                <li>新华门店</li>-->
<!--              </ul>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-popover>-->
      </div>
    </div>
    <div class="header-right navbar-top">
      <!--      <message-marquee @messageEvent="getUnreadAnnouncement"></message-marquee>-->
      <div @click="$router.push('demo')"><a>Demo 方法</a></div>
      <div class="header-news">
        <el-badge :hidden="unreadCount <= 0" :value="unreadCount ? unreadCount : 0" class="item">
          <i class="el-icon-message"></i>
        </el-badge>
      </div>
      <div class="header-account">
        <div class="avatar" v-popover:avator><img :alt="userInfo.userName" :src="userInfo.avatar | imgAvator"></div>
      </div>
      <el-popover
        ref="avator"
        popper-class="user-info custom-popover"
        placement="bottom-end"
        v-model="avatorVisible"
        width="300"
        trigger="hover"
        transition="fade-in-linear"
        :offset="8">
        <div class="base-info media-object">
          <div class="media-object-section shrink">
            <div class="avatar">
              <img :src="userInfo.avatar | imgAvator" alt=""/>
            </div>
          </div>
          <div class="media-object-section information-content">
            <div>
              <span class="color-blue information-title">{{userInfo.userName}}</span>
            </div>
            <div class="margin-t6 color-grey">
              <span>姓名:</span><span> {{userInfo.realName}}</span>
            </div>
          </div>
        </div>
        <div class="btn-user">
          <a>修改资料</a>
          <a>退出登录</a>
        </div>
      </el-popover>
    </div>
  </header>
</template>

<script>
export default {
  name: 'AppHeader',
  data () {
    return {
      input3: '',
      unreadCount: 3,
      avatorVisible: false,
      userInfo: {
        userName: '爱吃西虹市',
        realName: '焰总',
        avatar: 'CristianoRonaldo.jpg'
      }
    }
  }
}
</script>

<style scoped lang="less">
  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    background: #313541;
    align-items: center;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    & .header-left {
      height: 100%;
      color: #fff;
      & .logo {
        height: 100%;
        padding-left: 78px;
        background: url("../../../src/assets/img/logo.png") no-repeat 16px 8px;
        background-size: 34px;
      }
    }
    & span.cursor-pointer:hover {
      text-decoration: underline;
    }
    & .header-right {
      height: 100%;
      line-height: 25px;
      display: flex;
      color: #ffffff;
      align-items: center;
      font-size: 14px;
      & i {
        font-size: 22px !important;
      }
    }
    & .header-account{
      width: 60px;
      color: #fff;
      position: relative;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      &:hover{
        background: #404955;
      }
      & img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      & span{
        cursor: pointer;
        position: relative;
        display: inline-block;
        color: #fff;
        font-size: 12px;
        &:after{
          position: absolute;
          content: '';
          width: 0%;
          height: 1px ;
          background: #fff;
          bottom: -1px ;
          transition: all .5s;
          left: 0;
        }
        &:hover{
          &:after{
            width: 100%;
          }
        }
      }

    }
    & .header-news{
      /*padding: 7px 0 0 0;*/
      width: 60px;
      cursor: pointer;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      & .el-badge {
        height: 30px;
      }
      & i{
        font-size: 30px !important;
      }
      &:hover{
        background: #404955;
      }
      & .el-badge__content{
        transition: all .5s;
      }
    }
  }
  .avatar {
    width: 36px;
    height: 36px;
    text-align: center;
    overflow: hidden;
    border-radius: 100%;
    background: #efefef;
  }
  .information-content{
    padding: 6px 0 0 0;
    & .information-title{
      white-space: nowrap;
      font-size: 14px;
    }
    & div:nth-child(2) span{
      font-size: 12px;
    }
  }
  .user-info .avatar {
    height: 56px;
    width: 56px;
  }
  .user-info .btn-user {
    margin-top: 10px;
    padding: 10px 0 0;
    display: flex;
    justify-content: space-between;
    & a {
      display: inline-flex;
      width: 48%;
      height: 30px;
      align-items: center;
      justify-content: center;
      color: var(--color-secondary);
      border-radius: 2px;
      transition: background .3s;
      background: #eee;
      font-size: 12px;
      &:hover {
        background: #dad9d9ee;
      }
    }
  }
</style>
